<template>
	<view>
		<!--<tui-bottom-popup :show="show" @close="close" :zIndex="99999">
            <view class="tui-modal-box" >
                <view :style="{width:width?width:'100%'}" style="position: absolute;top: 0;right: 0;">
                    <view><image src="/static/images/share/point_bg.png" style="width: 100%;" mode="widthFix" /></view>
                    <view><image src="/static/images/share/point_btn.png" style="width: 50%;" mode="widthFix" /></view>
                </view>
            </view>
        </tui-bottom-popup>-->
		<!--<view class="cu-modal" :class="{'show':show}" >
            <view :style="{width:width?width:'100%'}" style="position: absolute;top: 0;right: 0;">
                <view><image src="/static/images/share/point_bg.png" style="width: 100%;" mode="widthFix" /></view>
                <view><image src="/static/images/share/point_btn.png" style="width: 50%;" mode="widthFix" /></view>
            </view>
        </view>-->

		<view class="tui-alert-mask" :class="[show ? 'tui-alert-mask-show' : '']">
			<view :style="{ width: width ? width : '100%' }" style="position: absolute;top: 0;right: 0;">
				<view><image src="../../static/point_bg.png" style="width: 100%;" mode="widthFix" /></view>
				<view @click="close" :class="[show ? 'hhh ' : '']">
					<image src="../../static/point_btn.png" style="width: 60%;" mode="widthFix" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'pointShare',
	props: {
		show: {
			type: Boolean,
			default: false,
		},
		width: {
			type: String,
			default: '100%',
		},
	},
	methods: {
		close() {
			this.$emit('close', {});
		},
		btnPay() {
			this.$emit('payment', { type: this.payType });
		},
		payTypeChange(e) {
			this.payType = e.detail.value;
		},
	},
};
</script>

<style scoped>
.hhh {
	animation: shake 0.5s linear infinite;
}
@keyframes shake {
	0% {
		transform: scale(1);
	}

	25% {
		transform: scale(1.05);
	}

	50% {
		transform: scale(1);
	}

	75% {
		transform: scale(1.05);
	}
}

.tui-alert-mask1 {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 99996;
	transition: all 0.3s ease-in-out;
	opacity: 0;
	visibility: hidden;
}
.tui-alert-mask {
	z-index: 9999;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1110;
	opacity: 0;
	outline: 0;
	text-align: center;
	-ms-transform: scale(1.185);
	transform: scale(1.185);
	backface-visibility: hidden;
	perspective: 2000upx;
	background: rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease-in-out 0s;
	pointer-events: none;
}
.tui-alert-mask-show {
	opacity: 1;
	transition-duration: 0.3s;
	-ms-transform: scale(1);
	transform: scale(1);
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}
.tui-alert-mask-show1 {
	visibility: visible;
	opacity: 1;
}
</style>
